<template>
  <div>
    <el-button
        type="warning"
        size="mini"
        icon="el-icon-edit"
        @click="add()"
        >新增</el-button
    >
    <el-card style="width:100%;margin-top:20px" class="box-card">
      <el-table
        v-loading="loading"
        :data="tableData"
        border
        class="table"
        ref="multipleTable"
        header-cell-class-name="table-header"
      >
        <el-table-column
          label="产线名称"
          prop="name"
          align="center"
        ></el-table-column>
        <el-table-column
          label="单班产能"
          prop="capacity"
          align="center"
        ></el-table-column>
        <el-table-column
          label="白班"
          :formatter="(row,column) => row.dayShift == 0?'否':row.dayShift == 1?'是':'-'"
          align="center"
        ></el-table-column>
        <el-table-column
          label="晚班"
          :formatter="(row,column) => row.nightShift == 0?'否':row.nightShift == 1?'是':'-'"
          align="center"
        ></el-table-column>
        <el-table-column
          label="操作"
          min-width="180"
          align="center"
          fixed="right"
        >
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="mini"
              icon="el-icon-edit"
              @click="handleEdit(scope.row)"
              >修改</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <pagination
          v-show="pageTotal > 0"
          :total="pageTotal"
          :page.sync="params.pageNum"
          :limit.sync="params.pageSize"
          @pagination="getData00"
        />
      </div>
    <!-- 新增编辑 -->
    <el-dialog :title="title" :visible.sync="dialogVisible" width="1000px">
      <el-form
        :rules="rules"
        ref="formName"
        :model="form"
        label-width="120px"
        size="small"
        class="form-box"
      >
        <el-form-item label="产线名称" prop="name"> <el-input v-model="form.name"></el-input></el-form-item>
        <el-form-item label="单班产能" prop="capacity"> <el-input-number v-model="form.capacity" controls-position="right" :min="0"></el-input-number></el-form-item>
        <el-form-item label="白班">
            <el-radio v-model="form.dayShift" :label="1" >是</el-radio>
            <el-radio v-model="form.dayShift" :label="0" >否</el-radio>
        </el-form-item>
        <el-form-item label="晚班">
            <el-radio v-model="form.nightShift" :label="1" >是</el-radio>
            <el-radio v-model="form.nightShift" :label="0" >否</el-radio>
        </el-form-item>
        <el-form-item label="排单日期" prop="expandDate">
          <el-date-picker
            :disabled="title == '编辑产线'"
            v-model="form.expandDate"
            value-format="yyyy-MM-dd"
            type="date"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="备注"> <el-input v-model="form.remark"></el-input></el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" size="small">取消</el-button>
        <el-button @click="sure()" type="primary" size="small"
          >保存</el-button
        >
      </span>
    </el-dialog>
    </el-card>
  </div>
</template>

<script>
import {getData,addData,putData} from '@/api/line'
export default {
    data () {
        return {
            pageTotal:0,
            params:{
                pageNum:1,
                pageSize:10
            },
            tableData:[],
            loading:false,
            title:'',
            dialogVisible:false,
            rules:{
              name: [
                { required: true, message: '请输入产线名称', trigger: 'blur' },
                { min: 0, max: 20, message: '长度在 0 到 20 个字符', trigger: 'blur' }
            ],
            expandDate:[
                { required: true, message: '请输入排单日期', trigger: 'blur' },
            ]
            },
            form:{
                id:'',
                name:'',
                capacity:0,
                dayShift:0,
                middleShift:0,
                nightShift:0,
                remark:'',
            }
        }
    },
    created(){
        this.getData00()
    },
    methods: {
        add() {
            this.title = "新增产线"
            this.form = {
                name:'',
                capacity:0,
                dayShift:1,
                middleShift:0,
                nightShift:1,
                remark:'',
            }
            this.dialogVisible = true
            this.$refs.formName.resetFields();
        },
        handleEdit(row) {
            this.title = "编辑产线"
            this.form = JSON.parse(JSON.stringify(row))
            this.dialogVisible = true
            this.$refs.formName.resetFields();
        },
        sure() {
            this.$refs['formName'].validate((valid) => {
            if (valid) {
                if(this.title == '新增产线'){
                    addData(this.form).then(res => {
                        if(res.code == 200){
                            this.$message.success('新增成功')
                            this.getData00()
                            this.dialogVisible = false
                        }
                    })
                }else if(this.title == '编辑产线') {
                    putData(this.form).then(res => {
                        if(res.code == 200){
                            this.$message.success('编辑成功')
                            this.getData00()
                            this.dialogVisible = false
                        }
                    })
                }
            } else {
                console.log('error submit!!');
                return false;
            }
            });

        },
        getData00(){
            this.loading = true; 
            getData(this.params).then(res => {
                if(res.code == 200){
                    this.tableData = res.rows;
                    this.pageTotal = res.total;
                    this.loading = false;  
                }
            }).catch(() => {

            })
        }
    }
}
</script>

<style>
  .text {
    font-size: 14px;
  }

  .item {
    padding: 18px 0;
  }

  .box-card {
    width: 480px;
  }
</style>